{extend name="public/layout"}
{block name="title"}个人中心{/block}
{block name="head"}
<style>
    html, body {
        background-color: #f5f5f5;
    }

    .main-bg {
        height: 3.3696rem;
        background-image: url("/images/home-bg.png");
        background-size: cover;
        background-position: center center;
        text-align: center;
        color: #fff;
    }

    .avatar {
        height: 1.3056rem;
        width: 1.3056rem;
        margin-top: 0.768rem;
        border-radius: 50%;
        border: 0.08rem solid #8dd2f4;
    }

    .main-text {
        padding-top: 0.12rem;
    }

    #man_type {
        position: absolute;
        right: 0.23040000000000002rem;
        top: 0.23040000000000002rem;
        font-size: 0.23040000000000002rem;
    }

    #man_type img {
        height: 0.23040000000000002rem;
        position: relative;
        top: 1px;
    }

    #masker {
        position: fixed;
        left: 0;
        right: 0;
        text-align: right;
        display: none;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
    #masker img{
        width:3rem;
    }
</style>
{/block}
{block name="content"}
<div class="main-bg">
    <img src="{$m.avatar}" alt="" class="avatar">
    <div class="main-text h1">
        {$m.nickname}
    </div>
    <div id="man_type">
        <img src="/images/icons/man.png" alt="">
        {$m.auth_status==0?'个人用户':'企业用户'}
    </div>
</div>
<div class="list bg-white mtl">
    <a class="list-item border-b border-t flex" href="{:U('index/info')}">
        <img src="/images/icons/zl.png" alt="">
        <div class="flex-con">
            我的资料
        </div>
        <div>
            <i class="icon icon-next"></i>
        </div>
    </a>
    <a class="list-item border-b flex" href="{:U('index/message')}">
        <img src="/images/icons/msg.png" alt="">
        <div class="flex-con">
            我的消息
        </div>
        <div>
            <i class="icon icon-next"></i>
        </div>
    </a>
    <a class="list-item border-b flex" href="{:U('donation/index')}">
        <img src="/images/icons/jl.png" alt="">
        <div class="flex-con">
            捐赠记录
        </div>
        <div>
            <i class="icon icon-next"></i>
        </div>
    </a>
    <a class="list-item border-b flex" id="share">
        <img src="/images/icons/share.png" alt="">
        <div class="flex-con">
            分享好友
        </div>
        <div>
            <i class="icon icon-next"></i>
        </div>
    </a>
    <a class="list-item border-b flex" href="{:U('index/power')}">
        <img src="/images/icons/lock.png" alt="">
        <div class="flex-con">
            我的权利
        </div>
        <div>
            <i class="icon icon-next"></i>
        </div>
    </a>
</div>
<div id="masker">
    <img src="/img/shared.png" alt="">
</div>
<script>
    $('#share').on('click', function () {
        $('#masker').show();
    });
    $('#masker').on('click',function () {
        $('#masker').hide();
    });
</script>
{/block}